<template>
	<view class="wap_content">
		<u-navbar fixed title="搜索歌曲" bgColor="#fff" placeholder :autoBack="true"></u-navbar>
		<view class="search_box display_flex_center">
			<u-search placeholder="搜索喜欢的音乐" @clear="keywords = ''" @search="submitSearch" @focus="searchfocus" actionText="取消" @custom="searchCustom" v-model="keywords"></u-search>
		</view>

		<block v-if="searchList.length>0">
			<!-- <view class="play-circle_box display_flex_seart" @click="playSongAll">
				<u-icon name="play-circle" size="28"></u-icon>全部播放（{{searchList.length}}）
			</view> -->
			<view class="pub_box">

				<view class="pub_item display_flex_seart" v-for="(item,index) in searchList" :key="item.id" @click="songItemClick(item)">
					<view class="pub_item_i_box display_flex_center">
						<image class="pub_item_image"
							:src="item.picUrl" mode="">
						</image>
					</view>
					<view class="pub_item_r display_flex_column">
						<view class="pub_item_title text_overflow_ellipsis">{{item.name}}</view>
						<view class="pub_item_desc text_overflow_ellipsis">
							<text>{{item.author}}</text>{{item.desc}}
						</view>
					</view>
					<view class="pub_item_icon display_flex_center">
						<u-icon name="kefu-ermai" size="28"></u-icon>
					</view>
				</view>

			</view>
		</block>

		<block v-else>
			<view class="hot_box">
				<view class="hot_tit">
					热门搜索
				</view>
				<view class="hot_con" v-if="hotSearch.length>0">
					<view class="hot_item" v-for="item in hotSearch" @click="hotItemClick(item)">
						{{item}}
					</view>
				</view>
			</view>

			<view class="hot_box">
				<view class="hot_tit">
					历史搜索
				</view>
				<view class="hot_con" v-if="historySearch.length>0">
					<view class="hot_item" v-for="(item) in historySearch" @click="hotItemClick(item)">
						{{item}}
					</view>
				</view>
			</view>
		</block>
		
		<x-play-card ref="playCard" v-if="showPlayCard"></x-play-card>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	var app=getApp();
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				scrollTop:0,
				historySearch: [],
				hotSearch: [],
				searchList: [],
				limit: 20,
				offset: 0,
				keywords: "",
				is_jump:false,
			}
		},
		computed:{
			...mapState(['showPlayCard','showPlayPage'])
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.offset += this.limit;
			this.hotItemClick(this.keywords);
		},
		onLoad(opt) {
			let keywords = opt.keywords || "";
			if (!uni.$isEmpty(keywords)) {
				this.is_jump = true;
				this.keywords = keywords;
				this.hotItemClick(keywords);
			}
			this.getHotSearchList();
			let historySearch = uni.getStorageSync("historySearch");
			if (historySearch) {
				this.historySearch = historySearch;
			}
		},
		methods: {
			...mapMutations(['setNowPlaySong', "addNowPlaySongListStart"]),
			
			/**
			 * 点击歌曲
			 */
			songItemClick(item){
				let _this = this;
				_this.addNowPlaySongListStart([item]);
				_this.setNowPlaySong(item);
				if (_this.is_jump) {
					_this.is_jump = false;
					return;
				}
				_this.$nextTick(()=>{
					_this.$refs.playCard.playSong();
				})
			},
			submitSearch(value){
				this.offset = 0;
				this.hotItemClick(value);
			},
			searchfocus(){
				this.searchList = [];
			},
			searchCustom(value){
				uni.navigateBack();
			},
			
			searchClear(){
				this.keywords = "";
			},
			
			/**
			 * 获取热搜
			 */
			getHotSearchList() {
				let _this = this;
				let hotSearch = [];
				let requestData = {
					url: '/search/hot',
					loading: true,
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					if (res.result && res.result.hots) {
						res.result.hots.forEach(item=>{
							hotSearch.push(item.first);
						})
						_this.hotSearch = hotSearch;
					}
				})
			},
			/**
			 * 点击搜索词
			 */
			hotItemClick(keywords){
				let _this = this;
				_this.keywords = keywords;
				if (!_this.historySearch.includes(keywords)) {
					_this.historySearch.push(keywords);
					uni.setStorageSync("historySearch", _this.historySearch);
				}
				let requestData = {
					url: '/cloudsearch',
					token: true,
					loading:"搜索中",
					type: "get",
					data:{keywords:keywords,limit:_this.limit,offset:_this.offset}
				};
				uni.$ajax(requestData).then(res => {
					if (res.result&&res.result.songs) {
						let songList = res.result.songs;
						let newList = [];
						if (songList.length>0) {
							songList.forEach(item => {
								newList.push({
									name:item.name,
									id:item.id,
									author:item.ar[0].name,
									desc:item.al.name,
									picUrl:item.al.picUrl
								});
							})
						}
						if (newList.length>0) {
							if (_this.offset == 0 && _this.is_jump) {
								_this.songItemClick(newList[0]);
							}
							if(_this.searchList.length>0) {
								_this.searchList = [..._this.searchList,...newList];
							} else {
								_this.searchList = newList;
							}
						}
					} else {
						uni.$alert("没数据了");
					}
				})
			},
		}
	}
</script>

<style>
	.wap_content {
		background-color: #fff;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom:  calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.search_box {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
	}

	.hot_box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx 20rpx;
	}

	.hot_tit {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.hot_con {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 24rpx;
	}

	.hot_item {
		box-sizing: border-box;
		height: 60rpx;
		background-color: #F7F7F7;
		border-radius: 100rpx;
		padding: 0 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.play-circle_box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	.pub_box {
		width: 100%;
	}

	.pub_item {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.pub_item_i_box {
		width: 100rpx;
		height: 100%;
		margin-right: 10rpx;
	}

	.pub_item_image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 15rpx;
	}

	.pub_item_icon {
		width: 120rpx;
		height: 100%;
	}

	.pub_item_r {
		flex: none;
		width: calc(100% - 240rpx);
		height: 100%;
	}

	.pub_item_title {
		width: 100%;
		color: #1a1a1a;
		font-size: 32rpx;
	}

	.pub_item_desc {
		width: 100%;
		color: #a1a1a1;
		font-size: 26rpx;
	}

	.pub_item_desc text {
		flex: none;
		box-sizing: border-box;
		font-size: 22rpx;
		color: red;
		background-color: #d4ecd9;
		border-radius: 10rpx;
		margin-right: 10rpx;
		padding: 0 5rpx;
	}
</style>